<template>
  <section class="feature-section">
    <h2>关于我们</h2>
    <div class="feature-grid">
      <div class="feature-card" @click="navigateTo('radio')">
        <component :is="features[0].iconComponent" class="feature-icon" />
        <span>精品电台</span>
      </div>
      <div class="feature-card" @click="navigateTo('reserve')">
        <component :is="features[1].iconComponent" class="feature-icon" />
        <span>场地预约</span>
      </div>
      <div class="feature-card" @click="navigateTo('committee')">
        <component :is="features[2].iconComponent" class="feature-icon" />
        <span>台委会构成</span>
      </div>
      <div class="feature-card" @click="navigateTo('activity')">
        <component :is="features[3].iconComponent" class="feature-icon" />
        <span>社团活动</span>
      </div>
    </div>
  </section>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth'; // 引入权限存储
// 导入SVG图标组件
import IconRadio from '@/components/icons/IconRadio.vue';
import IconCalendar from '@/components/icons/IconCalendar.vue';
import IconTeam from '@/components/icons/IconTeam.vue';
import IconActivity from '@/components/icons/IconActivity.vue';

// 定义功能区数据
const features = [
  { name: '精品电台', iconComponent: IconRadio },
  { name: '场地预约', iconComponent: IconCalendar },
  { name: '台委会构成', iconComponent: IconTeam },
  { name: '社团活动', iconComponent: IconActivity }
];

const router = useRouter();
const authStore = useAuthStore(); // 获取权限存储实例

const navigateTo = (page) => {
  // 根据用户角色确定基础路径
  const basePath = authStore.user?.role === 'minister' ? '/buzhang' : '/buyuan';
  
  const pagePaths = {
    // 为部员和部长分别指定对应的电台页面路径
    radio: authStore.user?.role === 'minister' 
      ? `${basePath}/AboutUs/Radio` 
      : `${basePath}/AboutUs/JingpinRadio`,
    reserve: '/reserve',
    committee: '/committee',
    // 区分部长和部员的社团活动路径
    activity: authStore.user?.role === 'minister' 
      ? `${basePath}/AboutUs/activity/recruitment` 
      : `${basePath}/aboutus/activity`
  };
  
  // 导航到对应的路径
  if (pagePaths[page]) {
    router.push(pagePaths[page]);
  }
};
</script>


<style scoped>
/* 样式保持不变 */
.feature-section {
  padding: 40px 20px;
  background-color: #f8f9fa;
  margin: 20px 0;
}

.feature-section h2 {
  color: #2c3e50;
  padding-bottom: 15px;
  margin-bottom: 40px;
  font-size: 2.2rem;
  text-align: center;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}

.feature-section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 3px;
  background-color: #e74c3c;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 25px;
  background-color: white;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  min-height: 200px;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.feature-icon {
  width: 65px;
  height: 65px;
  color: #e74c3c;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.feature-card span {
  font-size: 1.4rem;
  color: #2c3e50;
  font-weight: 600;
}

.feature-card:hover {
  background-color: #fff0f0;
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(231, 76, 60, 0.15);
}

.feature-card:hover i {
  transform: scale(1.2) rotate(5deg);
  color: #c0392b;
}

@media (max-width: 1200px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .feature-card i {
    font-size: 3.5rem;
  }
}
</style>